<include file="public@header">
<body>
    <div class="indexbg headhead">
        <form action="" method="post" class="layui-form">
        <h3 class="mytitle" style="position: relative;left: -0.4rem;">{:lang('Bind mailbox')}</h3>
        <div class="infshowall">
            <if $user.user_email>
                <div class="infshow">
                    <p>{:lang('Bound')}</p>
                    <input type="text" placeholder="{$user.user_email}" readonly>
                </div>
            </if>
            <div class="infshow">
                <p>{:lang('Email')}</p>
                <input type="text" name="username" placeholder="{:lang('Please input your email')}">
            </div>
            <div class="infshow infyzm">
                <p>{:lang('Code')}</p>
                <input type="text" name="code" placeholder="{:lang('Please enter code')}">
                <button type="button" class="infyzmbtn">{:lang('Get code')}</button>
            </div>
            <div class="infshow">
                <p>{:lang('Login password')}</p>
                <input type="text" name="password" placeholder="{:lang('Please enter your password')}">
            </div>
        </div>
        <button class="emailbtn" lay-submit>{:lang('Submit')}</button>
        </form>
    </div>
    <script src="__STATIC__/js/jquery.js"></script>
    <script src="__STATIC__/layui/layui.js"></script>
    <script type="text/javascript">
    layui.use(['layer','form'],function(){
        var layer = layui.layer,
            form = layui.form;

        $('.infyzmbtn').click(function(){
            var username = $('input[name=username]').val();
            var obj = $(this);
            $.ajax({
                type: 'get',
                url: '{:url("user/VerificationCode/send")}',
                data: {username:username},
                success:function(res){
                    layer.msg(res.msg)
                    if(res.code == 1){
                        let count = 60;
                        const countDown = setInterval(() => {
                        if (count === 0) {
                        $(obj).text('{:lang("Resend")}').removeAttr('disabled');
                        clearInterval(countDown);
                        } else {
                           $(obj).attr('disabled', true);
                           $(obj).text(count + 's');
                        }
                        count--;
                        }, 1000);
                    }
                }
            });
        });

        //监听提交
        form.on('submit', function(data){
            var _this = $(this);
            _this.attr("disabled",true);
            $.ajax({
                type: 'post',
                url: '{:url("user/profile/bindingEmail")}',
                data: data.field,
                success:function(res){
                    layer.msg(res.msg)
                    if(res.code == 1){
                        setTimeout(function(){ window.history.go(-1); }, 1500);
                    }else{
                        _this.removeAttr("disabled");
                    }
                }
            });
            return false;
        });
    });
    </script>
</body>
</html>